import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { AtButton, AtModal } from "taro-ui"
import Taro from '@tarojs/taro'
import api from '../../../http/api'

import './index.less'
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/modal.scss";


export default (props: any) => {
  const { card1, card2, card3, card4,manageId,id} = props.data
  const [open, setOpen] = useState(false)
  const cardClick = () => {
    setOpen(true)
  }
  const info:any  = Taro.getStorageSync('info')
  const loginId:any = info?JSON.parse(info).userInfo.loginId:0
  const getCard = (type:any)=>{
    let cont 
    if(type===1){
      cont=card1
    }else if(type===2){
      cont=card2
    }else if(type===3){
      cont=card3
    }else if(type===4){
      cont=card4
    }
    const params = {
      loginId,
      manageId,
      businessId:id,
      type:type,
      cont
    } 
    api.getCard(params).then((res)=>{
      api.cardVisit({businessId:id}).then(()=>{
        Taro.showToast({
          title: '领取成功',
          icon: 'success'
        })
      })
    })
  }
  return (
    <View className='getCard'>
      <View className='shareW'>
        {/* <View className='at-icon at-icon-share'></View>
        <View className='share'>分享</View> */}
      </View>
      {
          card1||card2||card3||card4?(
            <AtButton className='btn' onClick={()=>{cardClick()}}>立即领券</AtButton>
          ):(<View></View>)
      }
      <AtModal isOpened={open} onClose={ ()=>{setOpen(false)} }>
        <View className='cardList'>
          {
            card1 && (
              <View className='cardLi'>
                <View className='bg' style={{ backgroundImage: IMGSRC + 'card1.png' }}>
                  <Image className='cardIco' src={IMGSRC + 'card1.png'} />
                  <View className='p0'><Text className='num'>{card1}</Text>折</View>
                </View>
                <View className='content'>折扣券</View>
                <AtButton className='getBtn' size='small' onClick={()=>{getCard(1)}}>立即领取</AtButton>
              </View>
            )
          }
          {
            card2 && (
              <View className='cardLi'>
                <View className='bg' style={{ backgroundImage: IMGSRC + 'card2.png' }}>
                  <Image className='cardIco' src={IMGSRC + 'card2.png'} />
                  <View className='p0'>¥<Text className='num'>{card2}</Text></View>
                </View>
                <View className='content'>套餐券</View>
                <AtButton className='getBtn' size='small' onClick={()=>{getCard(2)}}>立即领取</AtButton>
              </View>
            )
          }
          {
            card3 && (
              <View className='cardLi'>
                <View className='bg'>
                  <Image className='cardIco' src={IMGSRC + 'card3.png'} />
                  <View className='p0'>¥<Text className='num'>{card3}</Text></View>
                </View>
                <View className='content'>体验券</View>
                <AtButton className='getBtn' size='small'  onClick={()=>{getCard(3)}}>立即领取</AtButton>
              </View>
            )
          }
          {
            card4 && (
              <View className='cardLi'>
                <View className='bg'>
                  <Image className='cardIco' src={IMGSRC + 'card4.png'} />
                  <View className='p0'>¥<Text className='num'>{card4.split('&')[1]}</Text></View>
                </View>
                <View className='cont'>
                  <View className='c1'>满减券</View>
                  <View className='c2'>满{card4.split('&')[0]}元使用</View>
                </View>
                <AtButton className='getBtn' size='small'  onClick={()=>{getCard(4)}}>立即领取</AtButton>
              </View>
            )
          }
        </View>
      </AtModal>
    </View>
  )
}
